<template>
  <!-- 更多专栏页面 -->
  <div style="background-color: #f5f5f5">
    <div style="margin: 0 auto; width: 1200px">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37">新闻专栏</a-breadcrumb-item>
      </a-breadcrumb>

      <!-- 内容 -->
      <div class="frame">
        <div class="right">
          <div class="cCnav">
            <!-- 固定 -->
            <a-affix :offset-top="top">
              <div class="affixDiv">
                <div class="cCinfo1">
                  <a href="javascript:">-&nbsp;全部专栏&nbsp;-</a>
                </div>
                <div
                  class="cCtxt3"
                  v-for="(item, index) in categoryData"
                  :key="index"
                >
                  <span class="cCspan1"
                    ><a
                      :class="{ selectedColor: selectIndex == index }"
                      @click="clinkStyle(index, item.code)"
                      >{{ item.name }}</a
                    ></span
                  >
                  <span class="cCspan2">
                    <img
                      v-show="selectIndex != index"
                      src="@/assets/image/mall.png"
                      alt=""
                    />
                    <img
                      style="width: 23px; margin-left: -3px"
                      v-show="selectIndex == index"
                      src="@/assets/image/mallactive.png"
                      alt=""
                    />
                  </span>
                </div>
              </div>
            </a-affix>
          </div>
          <!-- 固定导航结束 -->
        </div>
        <!-- // -->
        <div class="left">
          <!-- 列表 -->
          <!-- <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            v-if="thisEmployment.length == 0"
            style="padding: 100px 0"
          /> -->
          <div
            class="dlex3-div listDiv"
            v-for="(item, index) in newsList"
            :key="index"
            @click="goDetail(item.newsNo)"
          >
            <div class="image1" v-if="item.cover">
              <img
                :src="imageWebUrl + item.cover"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
              />
            </div>
            <div
              class="rightcontent"
              style="padding-top: 6px;margin-left: 30px;"
            >
              <p class="titleTxt1">{{ item.title }}</p>
              <div class="dlex2-div" style="margin-top: 8px">
                <span class="timeTxt2">发布：{{ item.publishTime }}</span>
                <span class="timeTxt2">阅读量：{{ item.browseNum }}</span>
                <span class="timeTxt2"
                  >来源：{{ item.source ? item.source : "无" }}</span
                >
              </div>
              <div style="margin-top: 16px; width: 620px">
                <p class="titleTxt6" style="line-height: 21px">
                  {{ item.intro }}
                </p>
              </div>
            </div>
          </div>
          <!-- <div class="pagination" v-show="total > pageSize">
            <a-pagination
              :total="total"
              :pageSize="pageSize"
              @change="fontnbr"
              show-less-items
            />
          </div> -->
          <div class="bottom">
            <div class="cnBottom" v-if="newsList.length > 1">
              <div style="margin: 0 auto; width: 230px">
                <a-button @click="more()" v-show="btnState == 1" class="sobtn"
                  >点击加载更多</a-button
                >
                <a-button v-show="btnState == 2" class="sobtn" :loading="true"
                  >正在加载中</a-button
                >
                <span
                  class="timeTxt1"
                  style="text-align: center"
                  v-if="btnState == 3"
                  >没有更多了</span
                >
              </div>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; margin-top: 88px"
            v-if="newsList.length < 1 && flag"
          />
        </div>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnState: 1,
      imgUrl: require("@/assets/image/pagint.png"),
      selectIndex: "", //传输进来的
      category:
        this.$route.query.category == undefined
          ? 116
          : this.$route.query.category, //传输进来的
      // config,
      // Employment: thisEmployment,
      // hotSearch: thisHotSearch,
      key: "1",
      // 分类
      categoryData: [
        // {
        //   name: "残奥会专栏",
        // },
        // {
        //   name: "自强风采专栏",
        // },
        // {
        //   name: "助残之歌专栏",
        // },
      ],
      thisEmployment: [],
      //固定
      top: 10,
      bottom: 10,
      // 列表数组.
      newsList: [],
      // 分页总数
      total: 0,
      pageSize: 6,
      pageIndex: 1,
      //
      listNbr: 1,
      flag: false,
      onLoading: false,
      //点击选择
      // selectIndex:0,
    };
  },

  methods: {
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getNewsList();
    },
    // 码表-分类
    getcodelist() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/code/list/name?codeType=11",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          // console.log(this.selectIndex);
          // console.log(res.data[this.selectIndex].code);
          this.category = res.data[this.selectIndex].code;
          this.categoryData = res.data;
          this.getNewsList();
        } else {
          this.onLoading = false;
        }
      });
    },
    // 列表
    getNewsList() {
      this.onLoading = true;
      this.$ajax({
        url: "/news/newsmsg/list/news",
        method: "post",
        params: {
          sortNo: this.category,
          location: "02",
          modularlType: "01",
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          if (this.total < this.pageIndex * this.pageSize) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false;
        }
      });
    },
    // 跳转详情页
    goDetail(e) {
      this.$router.push(
        "/details/details?id=" + e + "&type=文章" + "&from=" + 2
      );
    },
    //分页
    fontnbr(e) {
      this.flag = false;
      this.pageIndex = e;
      this.getNewsList();
    },
    // 点击选中状态
    clinkStyle(e, r) {
      this.$router.push("/all/specialColumn?index=" + e);
      this.newsList = [];
      this.flag = false;
      this.pageIndex = 1;
      this.selectIndex = e;
      this.category = r;
      this.getNewsList();
    },
  },
  watch: {},
  mounted() {
    this.selectIndex =
      this.$route.query.index >= 0 ? this.$route.query.index : 0;
    this.getcodelist();
    // this.getNewsList();
  },
};
</script>

<style lang="less">
#box {
  background-color: #f5f5f5 !important;
}
</style>
<style lang="less" scoped>
#box {
  background-color: #f5f5f5 !important;
}
.frame {
  display: flex;
  flex-direction: row;
  .left {
    width: 970px;
    min-height: 670px;
    margin-left: 20px;
    background-color: #ffffff;
    padding: 32px 40px;
    margin-bottom: 10px;
    flex: 1;
    .nav {
      background-color: #f6f7fb;
      padding: 15px;
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      a {
        padding: 0 15px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #333;
        margin: 0 15px;
        &.click {
          background-color: @theme;
          color: #fff;
        }
      }
    }
    .image1 {
      width: 196px;
      height: 120px;
      margin-left: 10px;
      // flex: 1;
      img {
        width: 196px;
        height: 120px;
      }
    }
    .titleTxt1 {
      font-family: PingFang SC;
      font-weight: 700;
      width: 600px;
      line-height: 25px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .pagination {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100px;
    }
  }
  .right {
    width: 181px;
    // 固钉样式
    .affixDiv {
      background-color: #ffffff;
    }
    .cCnav {
      width: 180px;
      height: 250px;
      float: left;
      .cCinfo1 {
        width: 180px;
        height: 50px;
        background-color: #ffbe37;
        a {
          z-index: 243;
          display: block;
          overflow-wrap: break-word;
          color: #232d32;
          font-size: 16px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 22px;
          text-align: center;
          padding-top: 14px;
          font-weight: 700;
        }
      }
      .cCtxt3 {
        width: 130px;
        height: 50px;
        // background-color: #ffffff;
        border-bottom: #f5f5f5 solid 1px;
        margin: 0 auto;
        overflow: hidden;
        .cCspan1 {
          float: left;
          padding-top: 15px;
          a {
            z-index: 245;
            width: 56px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(102, 102, 102, 1);
            font-size: 16px;
            font-weight: bold;
            font-family: PingFangSC-Regular;
            white-space: nowrap;
            line-height: 20px;
            text-align: left;
          }
          a:hover {
            color: #ffbe37;
          }
        }
        .cCspan2 {
          padding-top: 15px;
          width: 15px;
          float: right;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
.titleTxt6 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*行数*/
  -webkit-box-orient: vertical;
}
.selectedColor {
  color: #ffbe37 !important;
}
.listDiv {
  cursor: pointer;
  padding: 24px 0;
  border-bottom: 1px solid #eeeeee;
}
.listDiv:nth-child(1) {
  padding-top: 0px;
}
</style>
